<template>
<div>
    <el-table :data="store.getters['user/getUser']" border style="width: 100%">
    <el-table-column prop="roleid" label="用户编号" width="180" />
    <el-table-column prop="username" label="用户名称" width="180" />
    <el-table-column  label="所属角色" />
    <el-table-column  label="状态" >
        <template v-slot="item">
            <div>
                <el-button v-if="item.row.status==1" type="primary" plain>启用</el-button>
        <el-button v-else type="danger" plain>禁用</el-button>
            </div>
        </template>
    </el-table-column>
    <el-table-column  label="操作" >
       <template v-slot="item">
        <div>
            <el-button type="primary">编辑</el-button>
        <el-button type="danger" @click="del(item.row.id)">删除</el-button>
        </div>
       </template>
    </el-table-column>
  </el-table>
</div>
</template>
<script lang='ts' setup>
// 引入删除接口
import {userDelete} from '@/request/api'
// 引入消息弹框
import { ElMessageBox, ElMessage } from 'element-plus'
// 引入仓库
import {useStore} from 'vuex'
let store = useStore()
// 获取管理员列表
const getUser = ()=>{
  store.dispatch('user/getUserAction')
}
getUser()
// 删除事件
const del = (id:number)=>{
    ElMessageBox.confirm(
        '你确定要删除吗？','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    ) .then(res=>{
        // 调用删除接口
        userDelete({id}).then(res=>{
            if(res.code==200){
                ElMessage.success(res.msg)
            }
        })
    })
}
</script>
<style scoped>
</style>